<template>
  <div>
    <el-button type="primary" icon="el-icon-plus" @click="showDialog"
      >添加</el-button
    >
    <el-table
      style="width: 100%; margin-top: 20px"
      :border="true"
      :data="records"
    >
      <!-- 
      prop取得是列表数据中的字段 不是瞎写的
     -->
      <el-table-column prop="id" label="序号" width="180"> </el-table-column>
      <el-table-column prop="tmName" label="品牌名称" width="180">
      </el-table-column>
      <el-table-column prop="logoUrl" label="品牌LOGO">
        <!-- 划重点:
          eltable组件中使用插槽 会每一列的数据进行回传 row即代表当前列的信息
         -->
        <template slot-scope="{ row }">
          <img :src="row.logoUrl" alt="" style="width: 100px" />
        </template>
      </el-table-column>
      <el-table-column prop="address" label="操作">
        <template slot-scope="{ row }">
          <slot>
            <el-button
              type="warning"
              icon="el-icon-edit"
              @click="updateTradeMark(row)"
              >修改</el-button
            >
            <el-button
              type="danger"
              icon="el-icon-delete"
              @click="deleteTradeMarkI(row)"
              >删除</el-button
            >
          </slot>
        </template>
      </el-table-column>
    </el-table>

    <!-- @size-change="handleSizeChange" 用户切换设置每页展示几条数据时触发-->
    <!-- @current-change="handleCurrentChange" 用户点击当前页时触发
     -->
    <!-- :current-page 当前页 
      :pager-count 按钮数量 如果9 则连续页码是7 
      :total 总数据量
      :page-size 每一页需要展示几条数据
      :page-sizes 设置每一页展示几条数据
      layout 分页器布局
    -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      style="margin-top: 100px; text-align: center"
      :current-page="page"
      :pager-count="7"
      :total="total"
      :page-size="limit"
      :page-sizes="[3, 5, 10]"
      layout=" prev, pager, next, jumper,->,sizes,total "
    >
    </el-pagination>

    <!-- dialog组件 -->
    <!-- :visible.sync="dialogFormVisible" -->
    <!-- @click="dialogFormVisible = false" -->
    <!-- @click="dialogFormVisible = false" -->
    <el-dialog
      :title="tmFrom.id ? '修改品牌' : '添加品牌'"
      :visible.sync="dialogFormVisible"
    >
      <el-form :rules="rules" ref="ruleForm" :model="tmFrom">
        <el-form-item label="品牌名称" style="width: 80%" prop="tmName">
          <el-input autocomplete="off" v-model="tmFrom.tmName"></el-input>
        </el-form-item>
        <el-form-item label="上传品牌图片" style="width: 80%" prop="logoUrl">
          <el-upload
            class="avatar-uploader"
            action="dev-api/admin/product/fileUpload"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="tmFrom.logoUrl" :src="tmFrom.logoUrl" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            <div slot="tip" class="el-upload__tip">
              只能上传jpg文件，且不超过200kb
            </div>
          </el-upload>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="clearTradeMark">取 消</el-button>
        <el-button type="primary" @click="AddOrUpdateTradeMark"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: "MyTrademark",
  data() {
    // 自定义表单验证规则
    var validateTmName = (rule, value, callback) => {
      // 这个效果跟 官方提供的规则效果是一样的{min: 2,max: 10,message: "长度在 2 到 10 个字符",trigger: "change",}
      if (value.length < 2 || value.length > 12) {
        callback(new Error("品牌名称2-12位"));
      } else {
        callback();
      }
    };
    return {
      // 分页器初始页
      page: 1,
      // 每一页展示几条数据
      limit: 3,
      // 请求获取到的品牌信息数组
      records: [],
      // 分页器显示的总数据量
      total: null,
      // 控制dialog显示隐藏
      dialogFormVisible: false,
      // 品牌信息
      tmFrom: {
        // 品牌Id
        id: "",
        // 收集添加的品牌名称
        tmName: "",
        // 收集品牌LOGO图路径
        logoUrl: "",
      },

      // el提供的表单验证  rules定义需要验证的属性和验证规则 prop对应你要进行验证的属性 required 表示该属性必须验证 trigger 表示什么行为会触发开始验证
      rules: {
        tmName: [
          // 验证属性
          { required: true, message: "请输入品牌名称", trigger: "blur" },
          // 校验规则  // {min: 2,max: 10,message: "长度在 2 到 10 个字符",trigger: "change",} 这种是官方提供的
          // 自定义校验规则   validateTmName表示验证属性tmName对应的验证规则
          { validator: validateTmName, trigger: "change" },
        ],

        logoUrl: [{ required: true, message: "请上传品牌图片" }],
      },
    };
  },
  // 组件挂载完成调用获取品牌信息 请求函数
  mounted() {
    this.getTradeMarkList();
  },
  methods: {
    // 请求品牌信息api
    getTradeMarkList() {
      const { page, limit } = this;
      this.$API.trademark
        .reqTrademarkList(page, limit)
        .then((res) => {
          // 保存品牌信息列表数组
          this.records = res.data.records;
          // 展示数据总条
          this.total = res.data.total;
        })
        .catch((e) => {
          console.log(e);
        });
    },
    // 展示用户点击的当前页品牌信息 pager为组件封装好的一个参数 直接拿到用户点击的当前页码
    handleCurrentChange(pager) {
      this.page = pager;
      this.getTradeMarkList();
    },
    // 用户设置每页展示几条数据 也是封装好的 直接拿到参数 发请求拉最新数据即可
    handleSizeChange(limit) {
      // 修改响应式数据初始页
      this.limit = limit;
      // 发请求拉取展示对应页品牌信息
      this.getTradeMarkList();
    },
    // 点击添加展示dialog
    showDialog() {
      this.dialogFormVisible = true;
    },
    // 点击修改展示dialog
    updateTradeMark(row) {
      this.dialogFormVisible = true;
      // console.log(row);
      // 将当前列品牌信息填充至dialog展示 （利用浅拷贝，因为不会影响原tmFrom数据,原页面也不会影响,只有真正确认修改请求后才会去修改原tmFrom数据）
      this.tmFrom = { ...row };
    },

    // upload文件上传成功的回调
    handleAvatarSuccess(res, file) {
      if (res.code === 200) {
        // console.log(res);
        // 图片上传服务器后把图片在服务器内的路径重新赋值给响应式数据
        this.tmFrom.logoUrl = res.data;
      }
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    // 如果用户在上传图片时 点击了取消 则隐藏dialog 且清空已填写的内容
    clearTradeMark() {
      this.dialogFormVisible = false;
      this.tmFrom = {};
    },
    // 添加或修改的回调
    AddOrUpdateTradeMark() {
      // validate((success)) 为表单验证提供的方法 返回一个布尔值 真则为全部通过验证 书写成功以后的逻辑 反之。。
      this.$refs.ruleForm.validate((success) => {
        if (success) {
          this.dialogFormVisible = false;
          this.$API.trademark.reqAddOrUpdateTradeMark(this.tmFrom).then(() => {
            this.$message({
              message: this.tmFrom.id ? "修改品牌成功!" : "添加品牌成功!",
              type: "success",
            });
            // 拉取最新品牌列表 并通过id判断请求类型 如果是修改则携带当前页 反之如果是添加则默认在第一页
            this.getTradeMarkList(this.tmFrom.id ? this.page : 1);
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 删除品牌
    deleteTradeMarkI(row) {
      this.$confirm(`你将删除${row.tmName}, 是否继续?, 提示`, {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          // 用户点击确定后 发请求删除该id品牌 捕获状态 拉取最新列表
          let result = await this.$API.trademark.reqDeleteTradeMark(row.id);
          if (result.code === 200) {
            this.$message({
              type: "success",
              message: "删除成功!",
            });
            this.getTradeMarkList(
              // 值得注意的是 当前列表如被删完了 在拉取最新列表时需调转至上一页
              this.records.length > 1 ? this.page : this.page - 1
            );
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
};
</script>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
